<template>
  <div class="content">
    <!--    批改列表弹窗-->
    <el-dialog
      v-dialogDrag
      :title="$t('market.setting')"
      model
      :visible.sync="isclientlDialog"
      :close-on-click-modal="false"
      width="500px"
      center
      :before-close="handleClose"
    >
      <el-form label-width="100px">
        <el-form-item label="修改字段名称">
          <el-select v-model="fname" @change="handelName">
            <el-option v-for="item in proview.details" :key="item.fentryid" :label="item.ffieldname" :value="item.ffield" />
          </el-select>
        </el-form-item>
        <el-form-item label="修改字段内容">
          <el-input v-if="inputNum===1" v-model="fvalue" />
          <el-input-number v-else-if="inputNum===6" v-model="fvalue" />
          <el-select v-else-if="inputNum===2" v-model="fvalue">
            <el-option v-for="item in tableData" :key="item.fid" :label="item.fname" :value="item.fid" />
          </el-select>
          <el-input v-else-if="inputNum===3" v-model="fvalue">
            <i
              slot="suffix"
              class="el-input__icon el-icon-search"
              @click="opendialog"
            />
          </el-input>
          <el-checkbox v-else-if="inputNum===4" v-model="fvalue" @change="checkHandel" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">{{ $t('btn.cancel') }}</el-button>
        <el-button type="primary" @click="materReload">{{ $t('btn.confirm') }}</el-button>
      </span>
    </el-dialog>
    <el-dialog
      v-dialogDrag
      :title="$t('market.infoList')"
      model
      :visible.sync="infoDialog"
      :close-on-click-modal="false"
      width="500px"
      center
      append-to-body
    >
      <div>
        <jc-table
          :table-header="tableHeader"
          :table-data="tableData"
          table-height="500px"
          @clickRow="infoSelectRow"
        />
      </div>
      <jc-pagination
        v-show="total>0"
        :total="total"
        :page.sync="pagination.pageNum"
        :limit.sync="pagination.pageSize"
        @pagination="handleMagnifier"
      />
    </el-dialog>
    <el-dialog
      v-dialogDrag
      :title="$t('market.materialGroup')"
      model
      :visible.sync="openCustomer"
      :close-on-click-modal="false"
      width="30%"
    >
      <div class="public-form">
        <el-tree
          :data="tableData"
          :props="defaultProps"
          @node-click="handleNodeClick"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { batchUpdate, list, axiosUrl } from '@/api/basicManagement/userGroup'

export default {
  props: {
    fids: {
      type: Array,
      default: function() {
        return []
      }
    },
    ftype: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      isclientlDialog: true,
      infoDialog: false,
      openCustomer: false,
      proview: {},
      detailsData: {},
      inputNum: 1,
      pagination: {
        pageNum: 1, // 当前页
        pageSize: 200 // 每页显示多少条数据
      },
      total: 0, // 总条目
      fname: '',
      fvalue: '',
      defaultProps: {
        children: 'details',
        label: 'fname'
      },
      treeClickCount: 0, // 物料分组点击次数
      tableData: [],
      tableHeader: [
        { label: this.$t('market.dataName'), prop: 'fname' },
        { label: this.$t('shop.fnumber'), prop: 'fnumber' }
      ]
    }
  },
  created() {
    this.queryTBdCustomerList()
  },
  methods: {
    opendialog() {
      if (this.ffieldname === '物料分组') {
        this.openCustomer = true
      } else {
        this.infoDialog = true
      }
    },
    // 获取数据
    handleMagnifier(ev) {
      axiosUrl(this.ffieldvalue, { viewName: this.viewName, ...this.pagination }).then(res => {
        if (res.code === 0) {
          if (ev === '物料分组') {
            this.tableData = res.data
          } else {
            this.tableData = res.data.list
            this.total = res.data.total
          }
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 物料分组
    handleNodeClick(item) {
      this.treeClickCount++
      if (this.treeClickCount >= 2) return
      this.timer = window.setTimeout(() => {
        if (this.treeClickCount === 1) {
          this.treeClickCount = 0
        } else if (this.treeClickCount > 1) {
          this.treeClickCount = 0
          const { fid, fname } = item
          this.fvalue1 = fid
          this.fvalue = fname
          this.openCustomer = false
        }
      }, 300)
    },
    // 双击获取数据
    infoSelectRow(ev) {
      // 仓位 物料类型  存货类型  生产车间
      const arr = ['FSTOCKPLACEID', 'FERPCLSID', 'FCATEGORYID', 'FWORKSHOPID']
      if (this.fname === 'FSTOCKID') { // 出库
        this.fvalue = ev.fname
        this.fvalue1 = ev.fstockId
      } else if (arr.includes(this.fname)) { // 仓位
        this.fvalue = ev.fname
        this.fvalue1 = ev.fid
      }
      this.infoDialog = false
    },
    // 多选-跳层
    checkHandel(ev) {
      this.fvalue1 = ev ? 1 : 0
    },
    // 监听修改字段名称
    handelName(ev) {
      this.proview.details.forEach(res => {
        if (res.ffield === ev) {
          this.detailsData = res
          this.inputNum = res.ffieldtype // 输入框类型
          this.ffieldvalue = res.ffieldvalue // 接口
          this.ffieldname = res.ffieldname // 修改字段名称
          if (res.ffield === 'FERPCLSID') { // 物料类型
            this.viewName = 'SX_V_UNIT_ERPCLSID'
          } else if (res.ffield === 'FCATEGORYID') { // 存货类型
            this.viewName = 'SX_V_UNIT_CATEGORYID'
          } else if (res.ffield === 'FWORKSHOPID') { // 生产车间
            this.viewName = 'SX_V_WORKSHOP'
          } else if (res.ffield === 'FISSKIP') { // 跳层
            this.fvalue = false
            this.fvalue1 = 0
          } else {
            this.viewName = ''
          }
          this.ffieldvalue && this.handleMagnifier(res.ffieldname)
        }
      })
    },
    // 获取批改列表
    async queryTBdCustomerList() {
      this.isclientlDialog = true
      const DATA = {
        ftype: this.ftype // 1物料
      }
      const { data: RES } = await list(DATA)
      this.proview = RES.list[0]
    },
    // 批改
    materReload() {
      const DATA = {
        mainTableName: this.proview.ftablename,
        mainKey: this.proview.fkey,
        tableName: this.detailsData.ftablename,
        key: this.detailsData.fkey,
        field: this.detailsData.ffield,
        fieldValue: this.fvalue1,
        fIds: this.fids
      }
      batchUpdate(DATA).then(res => {
        if (res.code === 0) {
          this.handleClose()
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 关闭前回调
    handleClose() {
      this.$emit('setting')
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  @include listBom;
}
</style>
